<template>
  <!-- 头部 -->
  <AppHeader />
  <!-- 视频播放区域 -->
  <VideoPlay :videoInfo="videoInfo" />
  <!-- 视频详情 -->
  <VideoInfo :videoInfo="videoInfo" />
  <!-- 相关推荐/评论 -->
  <VideoBottom />
</template>

<script setup lang="ts">
import AppHeader from '@/components/app-header.vue'
import VideoPlay from './components/video-play.vue'
import VideoInfo from './components/video-info.vue'
import VideoBottom from './components/video-bottom.vue'
import axios from 'axios'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { IVideoInfo } from '../Video/types'

// 初始化空对象，空对象不需要指定键名
const videoInfo = ref<IVideoInfo>({})
// 获取路由对象
const route = useRoute()

axios({
  url: '/videoDetail',
  method: 'get',
  // 根据路由对象的ID 参数发送请求获取对应的视频详情
  params: { id: route.params.id }
}).then(({ data }) => {
  videoInfo.value = data.result
  console.log('视频详情数据', data.result)
})
</script>
